<template>
    <div v-if="showContent">
        <el-dialog title="导入" ref="modal3" :visible="dialogShow"  :before-close="closeBox" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
        <div >
            <div style="padding-bottom: 16px;">
                导入数据需使用系统内固定的模板，如您还未取得相应的模板，请点击
                <span style="color: #409EFF;cursor: pointer;" @click="down">下载</span>
                获取模板后，再进行文件上传。
            </div>
            <div>
                <el-row>
                    <el-col :span="12">
                        <el-upload
                            ref="excelRef"

                            drag
                            action="#"
                            :multiple="false"
                                                    :limit='1'
                          :on-exceed="limitExcel"
                            :headers="headers"
                            :auto-upload="false"
                            :file-list="fileExcelList"
                            :on-change="handleChangeExcel"
                            accept=".xlsx,.xls"
                             :on-remove="removeExcel"
                        >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">
                                将excel文件拖到此处，或
                                点击<em style="color: #409EFF;cursor: pointer;">上传</em>
                            </div>
                        </el-upload>
                   </el-col>

                   <!-- 第二个 -->
                   <el-col :span="12">
                        <el-upload
                        ref="zipRef"
                        :limit='1'
                          :on-exceed="limitZip"
                            drag
                            action="#"
                            :multiple="false"

                            :headers="headers"
                            :auto-upload="false"
                            :file-list="fileZipList"
                            :on-remove="removeZip"
                            :on-change="handleChangeZip"
                            accept=".zip"
                        >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">
                                将zip文件拖到此处，或
                                点击<em style="color: #409EFF;cursor: pointer;">上传</em>
                            </div>

                        </el-upload>
                   </el-col>
            </el-row>

            </div>
            <div style="position: relative;height: 30px;padding-top: 8px;">
                <el-button @click="closeBox" style="position: absolute;right: 96px;">取消</el-button>
                <el-button :disabled="fileCount" @click="uplodaConfirm(false)" style="position: absolute;right: 20px;">确认</el-button>
            </div>
        </div>
        <vxe-modal v-model="msgShow" width="60%"  @close="msgDialogFn" :position="{top: '5vh'}">
                <template v-slot>
                    <div style="max-height: 85vh;overflow-y: auto;overflow-x: hidden;">
                        <div v-for="(msg,index) in messageDialog" :key="index">
                            {{ msg }}
                        </div>
                    </div>

                </template>
          </vxe-modal>
    </el-dialog>
    </div>

    
</template>
  <script>
import { weblmport } from '@/api/vmsFullOutlnvoice.js'
import { downloadExcelCommon } from '@/api/fileDownload.js';

export default {
    name: 'importFile',
    data() {
        return {
            headers: {
                'Content-Type': 'multipart/form-data',
            },

            dialogShow: false,
            showContent: false,
            fileType: 'pdf',
            fileExcelList: [],
            fileZipList: [],
            detailTableData: [],
            excelSize: 0,
            zipSize:0,
            msgShow:false,
            messageDialog:'',

        }
    },
    methods: {
        msgDialogFn(){
            this.msgShow = false;
            this.messageDialog = []
        },

        open(strs) {
            const h = this.$createElement;
            this.$msgbox({
                title: '消息提示',
                message: h('div', null, strs.map(str=>{
                    return h('div', {
                        style: "padding: 10px 0 0 0"
                    }, str)
                })),
                confirmButtonText: '确定',
                beforeClose: (action, instance, done) => {
                    done()
                }
                }).then(action => {
                });
        },
        uplodaConfirm(flag = false) {
            if(this.fileCount){
                return  this.$message.error('上传文件不能超过 30MB!');
            }else if(this.fileExcelList.length === 0 || this.excelSize === 0){
                return  this.$message.error('请上传excel文件!');
            } else if(this.fileZipList.length === 0 || this.zipSize === 0){
                return  this.$message.error('请上传zip文件!');
            }

            let fd = new FormData()
            this.fileExcelList.forEach((item) => {
                //文件信息中raw才是真的文件
                fd.append('excelFile', item.raw)
            })
            this.fileZipList.forEach((item) => {
                //文件信息中raw才是真的文件
                fd.append('zipFile', item.raw)
            })
            fd.append('confirmFlag', flag)
            weblmport(fd).then((res) => {
                if(res.code == '7012'){
                    // this.messageDialog = res.data
                    // this.msgShow = true;
                    this.open(res.data)
                }else if (res.code === 200) {
                    this.closeBox()
                } else if(res.code == 7300){
                    this.$confirm( `存在已导入的数据，是否继续导入？`,'确认').then(data=>{
                        this.uplodaConfirm(true)

                        },err=>{

                        })
                }else if(res.code == '7315'){
                    // this.$message(  res.message || '失败')
                }else {
                    // this.$message(  res.message || '失败')
                }
            })
        },

        handleChangeExcel(file, fileList) {
            console.log(fileList)
            if(this.beforeUploadExcel(file)){
                this.fileExcelList = fileList
            }else{
                this.excelSize = 0;
                this.fileExcelList = []
            }
            
        },
        beforeUploadExcel(file) {
            // 检测文件类型

            const safeType = file.name.includes(".xlsx")  || file.name.includes(".xls");
            const isLt30M = file.size / 1024 / 1024 < 30;

            if (!safeType) {
                this.$message.error('上传文件只能是 xlsx、xls 格式!');
            }else   if (!isLt30M ) {
                this.$message.error('上传文件大小不能超过 30MB!');
            }else{
                if(this.fileCount){
                    this.$message.error('excel文件和压缩包文件总共不能超过30MB!'); 
                    return false;
                }
                this.excelSize =  file.size;
            }
            return safeType && isLt30M;
        },
        limitExcel(files, fileList) {
            if(fileList.length >= 1){
                this.$message.error('只能上传一个excel文件!');
                // this.fileExcelList.pop()
            }
        },
        removeExcel(files, fileList) {
            this.fileExcelList = [];
            try {
                while(this.fileExcelList.length != 0){
                    this.fileExcelList.length.pop()
                }
            } catch (error) {
                
            }
            
        },
        handleChangeZip(file, fileList) {
            if(this.beforeUploadZip(file)){
                this.fileZipList = fileList
            }else{
                this.zipSize = 0;
                this.fileZipList = []

            }
        },
        beforeUploadZip(file) {
            const safeType = file.name.includes(".zip");
            const isLt30M = file.size / 1024 / 1024 < 30;

            if (!safeType) {
                this.$message.error('上传文件只能是 zip 格式!');
            }else  if (!isLt30M ) {
                this.$message.error('上传文件不能超过 30MB!');
            }else{
                if(this.fileCount){
                    this.$message.error('excel文件和压缩包文件总共不能超过30MB!'); 
                    return false;
                }
                this.zipSize =  file.size;
            }
            return safeType && isLt30M;
        },
        limitZip(files, fileList) {
            if(fileList.length >= 1){
                this.$message.error('只能上传一个zip文件!');
                // this.fileZipList.pop()
            }
        },
        removeZip(files, fileList) {
            this.fileZipList = []
            try {
                while(this.fileZipList.length != 0){
                    this.fileZipList.length.pop()
                }
            } catch (error) {
                
            }
        },
        initData(){
            this.fileExcelList =  [];
           this.fileZipList =  [];
           this.detailTableData =  [];
            this.excelSize = 0;
            this.zipSize = 0
            try {
                this.$refs.excelRef.clearFiles()
                this.$refs.zipRef.clearFiles()
            } catch (error) {
                
            }

        },
        closeBox() {
            this.initData()
            this.dialogShow = false

            setTimeout(()=>{
                this.showContent = false
            },100)


        },
        async down() {

            downloadExcelCommon({
                excelType:1
            }, 'get')
                .then(() => {})
                .catch((error) => {
                    console.error('文件下载失败:', error)
                })
        },
        show() {
            this.initData()
            this.showContent = true

            
            setTimeout(()=>{
                this.dialogShow = true
            },1000)

        },
    },
    computed:{
        fileCount(){
            return (this.zipSize + this.excelSize)   / 1024 / 1024 > 30
        }
    }
}
</script>
  <style lang="scss" scoped>
  ::v-deep  .el-dialog{
        margin-top: 15vh !important;
    }
  ::v-deep  .el-dialog__title{
        font-size: 18px !important;
    }
::v-deep .el-upload-list__item-name{
    white-space: normal;
}
</style>

<style >
  .el-message-box__message{
    max-height: 80vh !important;
    overflow-x: hidden;
    overflow-y: auto;
  }
   .el-message-box{
    max-width: 800px;
    min-width: 400px;
    width: auto !important;
  }

</style>